import React, { Component } from "react";
import { NavBar, Icon } from 'antd-mobile';
import { Flex } from 'antd-mobile';
import { Tabs } from 'antd-mobile';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';

const tabs = [
    { title: '昨日收益' },
    { title: '今年来' },
    { title: '累计收益' }
];

export default class MyAssetDetail extends Component {
    onChange = (key) => {
        console.log(key);
    }

    render() {
        return (
            <div className="myAsset-div">
                <div>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.location.href = '#/terran/mySimulation'}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                        style={{position:'relative'}}
                    >收益明细</NavBar>
                </div>

                <Tabs tabs={tabs}
                    initialPage={0}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                >
                    <div className='昨日收益'>
                        <Card full>
                            <Card.Header
                                title="昨日收益"
                            />
                            <Card.Body  style={{height:'10vh',padding:'0px'}}>
                                <div className="flex-container" style={{margin:'0px',height:'10vh'}}>
                                    <Flex>
                                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>昨日收益（元）</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>昨日收益率</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>同期沪深300</div></Flex.Item>
                                    </Flex>
                                    <Flex>
                                        <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+8.13</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+2.31%</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+1.13%</div></Flex.Item>
                                    </Flex>
                                </div>
                            </Card.Body>
                        </Card>
                        <Card full style={{height:'50vh',border:'none'}}>
                            <Card.Header
                                title="收益明细"
                            />
                            <Card.Body  style={{height:'10vh',padding:'0px'}}>
                                <div className="flex-container">
                                    <Flex style={{margin:'0px'}}>
                                        <Flex.Item><div style={{ textAlign: 'left', color: '#999999' }}>基金名称</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', color: '#999999' }}>收益</div></Flex.Item>
                                    </Flex>
                                    <Flex style={{ marginTop: '20px' }}>
                                        <Flex.Item><div style={{ textAlign: 'left', fontSize: '16px' }}>华宝创新优选混合</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', fontSize: '16px', color: 'red' }}>+8.14</div></Flex.Item>
                                    </Flex>
                                    <Flex style={{ marginTop: '20px' }}>
                                        <Flex.Item><div style={{ textAlign: 'left', fontSize: '16px' }}>天弘弘择短债债权C</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', fontSize: '16px', color: 'green' }}>-0.01</div></Flex.Item>
                                    </Flex>
                                </div>
                            </Card.Body>
                        </Card>
                    </div>

                    <div className='今年来'>
                        <WhiteSpace size="lg" />
                        <Card full>
                            <Card.Header
                                title="今年来"
                            />
                            <Card.Body style={{padding:'0px'}}>
                                <div className="flex-container" style={{margin:'0px',height:'15vh'}}>
                                    <Flex>
                                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>今年来收益（元）</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>今年来收益率</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>同期沪深300</div></Flex.Item>
                                    </Flex>
                                    <WhiteSpace size="lg" />
                                    <Flex>
                                        <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+10.28</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+0.94%</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'center', color: 'green' }}>-6.52%</div></Flex.Item>
                                    </Flex>
                                </div>
                            </Card.Body>
                        </Card>

                        <WhiteSpace size="lg" />
                        <Card full style={{border:'none'}}>
                            <Card.Header
                                title="收益明细"
                            />
                            <Card.Body style={{padding:'0px'}}>
                                <div className="flex-container" style={{margin:'10px',height:'30vh'}}>
                                    <Flex>
                                        <Flex.Item><div style={{ textAlign: 'left', color: '#999999' }}>基金名称</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', color: '#999999' }}>收益</div></Flex.Item>
                                    </Flex>
                                    <Flex style={{ marginTop: '20px' }}>
                                        <Flex.Item><div style={{ textAlign: 'left', fontSize: '16px' }}>华宝创新优选混合</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', fontSize: '16px', color: 'red' }}>+9.59</div></Flex.Item>
                                    </Flex>
                                    <Flex style={{ marginTop: '20px' }}>
                                        <Flex.Item><div style={{ textAlign: 'left', fontSize: '16px' }}>天弘弘择短债债权C</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', fontSize: '16px', color: 'red' }}>+0.69</div></Flex.Item>
                                    </Flex>
                                </div>
                            </Card.Body>
                        </Card>
                    </div>

                    <div className='累计收益'>
                        <WhiteSpace size="lg" />
                        <Card full>
                            <Card.Header
                                title="累计收益"
                            />
                            <Card.Body  style={{height:'10vh',padding:'0px'}}>
                                <div className="flex-container" style={{margin:'0px',height:'15vh'}}>
                                    <Flex>
                                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>累计收益（元）</div></Flex.Item>
                                    </Flex>
                                    <WhiteSpace size="lg" />
                                    <Flex>
                                        <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+25.98</div></Flex.Item>
                                    </Flex>
                                </div>
                            </Card.Body>
                        </Card>

                        <WhiteSpace size="lg" />
                        <Card full style={{border:'none'}}>
                            <Card.Header
                                title="收益明细"
                            />
                            <Card.Body style={{padding:'0px'}}>
                                <div className="flex-container" style={{margin:'10px',height:'30vh'}}>
                                    <Flex>
                                        <Flex.Item><div style={{ textAlign: 'left', color: '#999999' }}>基金名称</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', color: '#999999' }}>收益</div></Flex.Item>
                                    </Flex>
                                    <Flex style={{ marginTop: '20px' }}>
                                        <Flex.Item><div style={{ textAlign: 'left', fontSize: '16px' }}>广发消费品精选混合</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', fontSize: '16px', color: 'red' }}>+15.70</div></Flex.Item>
                                    </Flex>
                                    <Flex style={{ marginTop: '20px' }}>
                                        <Flex.Item><div style={{ textAlign: 'left', fontSize: '16px' }}>华宝创新优选混合</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', fontSize: '16px', color: 'red' }}>+9.59</div></Flex.Item>
                                    </Flex>
                                    <Flex style={{ marginTop: '20px' }}>
                                        <Flex.Item><div style={{ textAlign: 'left', fontSize: '16px' }}>天弘弘择短债债权C</div></Flex.Item>
                                        <Flex.Item><div style={{ textAlign: 'right', fontSize: '16px', color: 'red' }}>+0.69</div></Flex.Item>
                                    </Flex>
                                </div>
                            </Card.Body>
                        </Card>
                    </div>
                </Tabs>
            </div>
        );
    }
}